<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>管理后台 - 登录</title>

    <link rel="shortcut icon" href="favicon.ico"> <link href="${ctx }/res/hplus/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="${ctx }/res/hplus/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">

    <link href="${ctx }/res/hplus/css/animate.min.css" rel="stylesheet">
    <link href="${ctx }/res/hplus/css/style.min.css?v=4.0.0" rel="stylesheet"><base target="_self">
    <!--[if lt IE 8]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <script>if(window.top !== window.self){ window.top.location = window.location;}</script>
</head>

<body class="gray-bg">

<div class="middle-box text-center loginscreen  animated fadeInDown">
    <div>
        <div>

            <h1 class="logo-name"></h1>

        </div>
        <h3></h3>

        <form class="m-t" role="form" id="form" action="${ctx }/admin/doLogin" method="post">
            <%-- <form class="m-t" role="form" id="form" action="${ctx }/j_spring_security_check" method="post"> --%>
            <div class="form-group">

                <input type="text" id="loginname"  name="j_username" class="form-control" placeholder="用户名" required="">
                <label class="errorClass" id="loginnameError">${errors.loginname }</label>

            </div>
            <div class="form-group">
                <input type="password" id="loginpass"  name="j_password" class="form-control" value="333333" placeholder="密码" required="">
                <label class="errorClass"  id="loginpassError">${errors.loginpass}</label>
            </div>
            <button type="submit" class="btn btn-primary block full-width m-b">登 录</button>


            <!--
                        <p class="text-muted text-center"> <a href="login.html#"><small>忘记密码了？</small></a> | <a href="register.html">注册一个新账号</a>
                        </p>
            -->
                <div class="el-p">
                    <c:if test="${not empty SPRING_SECURITY_LAST_EXCEPTION }">
                        <%--<script type="text/javascript" language="javascript">
                            alert("${SPRING_SECURITY_LAST_EXCEPTION.localizedMessage}");
                        </script>--%>
                        <c:if test="${'Bad credentials' == SPRING_SECURITY_LAST_EXCEPTION.message }">
                            <script type="text/javascript" language="javascript">
                                alert("用户名或密码错误，请重新登录");
                            </script>
                        </c:if>
                        <c:if test="${fn:contains(SPRING_SECURITY_LAST_EXCEPTION.message, 'find user by username')}">
                            <script type="text/javascript" language="javascript">
                                alert("用户名或密码错误，请重新登录");
                            </script>
                        </c:if>
                    </c:if>

                    <%
                        response.setHeader("Cache-Control","no-store");//HTTP 1.1
                        response.setHeader("Pragma","no-cache");//HTTP 1.0
                        response.setDateHeader("Expires",0);//prevents caching at the proxy server
                    %>


                   <%-- <c:if test="${not empty SPRING_SECURITY_LAST_EXCEPTION }">
                        <c:if test="${'Bad credentials' == SPRING_SECURITY_LAST_EXCEPTION.message }">
                            <script type="text/javascript" language="javascript">
                                alert("密码或用户名错误，请重新登录");
                            </script>
                        </c:if>
                    </c:if>--%>

                </div>
        </form>
    </div>
</div>
<script src="${ctx }/res/hplus/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx }/res/hplus/js/bootstrap.min.js?v=3.3.5"></script>
</body>

<style type="text/css">
    .errorClass{
        color: #f40000;      border:1px solid #ffb8b8; background-color: #fef2f2; padding: 4px 4px 4px 4px;
    }
</style>
<script type="text/javascript">

    $(function() {
        /*
         * 1. 得到所有的错误信息，循环遍历之。调用一个方法来确定是否显示错误信息！
         */
        $(".errorClass").each(function() {
            showError($(this));//遍历每个元素，使用每个元素来调用showError方法
        });
        /*
         * 3. 输入框得到焦点隐藏错误信息
         */
        $(".form-control").focus(function() {
            var labelId = $(this).attr("id") + "Error";//通过输入框找到对应的label的id
            $("#" + labelId).text("");//把label的内容清空！
            showError($("#" + labelId));//隐藏没有信息的label
        });

        /*
         * 4. 输入框失去焦点进行校验
         */
        $(".form-control").blur(function() {
            var id = $(this).attr("id");//获取当前输入框的id
            var funName = "validate" + id.substring(0,1).toUpperCase() + id.substring(1) + "()";//得到对应的校验函数名
            eval(funName);//执行函数调用
        });

        /*

         * 5. 表单提交时进行校验
         */
        $("#submitBtn").sumbit(function(){
            var bool = true;//表示校验通过
            if(!validateLoginname()) {
                bool = false;
            }
            if(!validateLoginpass()) {
                bool = false;
            }
            return bool;
        });

    });

    /*
     * 登录名校验方法
     */
    function validateLoginname() {
        var id = "loginname";
        var value = $("#" + id).val();//获取输入框内容
        /*
         * 1. 非空校验
         */
        if(!value) {
            /*
             * 获取对应的label
             * 添加错误信息
             * 显示label
             */
            $("#" + id + "Error").text("用户名不能为空！");
            showError($("#" + id + "Error"));
            return false;
        }
        return true;
    }

    /*
     * 登录密码校验方法
     */
    function validateLoginpass() {
        var id="loginpass";
        var value=$("#"+id).val();
        if(!value){
            $("#"+id+"Error").text("密码不能为空");
            showError($("#"+id+"Error"));
            return false;
        }
        return true;
    }

    /*
     * 判断当前元素是否存在内容，如果存在显示，不页面不显示！
     */
    function showError(ele) {
        var text = ele.text();//获取元素的内容
        if(!text) {//如果没有内容
            ele.css("display", "none");//隐藏元素
        } else {//如果有内容
            ele.css("display", "");//显示元素
        }
    }
</script>
</html>